<template>
  <div class="productItems">
      <div class="product_item" v-for="Product_item in products" :key="Product_item.orderId">
          <div class="product_title">
              <div class="product_type">
                  <i class="iconfont">&#xe609;</i>
                  <span>{{Product_item.type}}</span>
              </div>
              <div class="product_status">{{Product_item.status==1? "出票完成" :"未支付"}}</div>
          </div>
          <div class="product_info">
              <div class="info_container">
                  <span>{{Product_item.info}}</span>
                  <span>￥ {{Product_item.price}}</span>
              </div>
              <div class="info_time">
                  {{Product_item.time}}
              </div>
              <div class="info_time">
                  {{Product_item.otherInfo}}
              </div>
          </div>
          <div class="product_order">
              <div class="orderId">
                订单编号： {{Product_item.orderId}}
              </div>
              <div class="order_btn">
                  删除订单
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:{
        products:{
            type:Array
        }
    },
  setup() {
    return {};
  },
};
</script>
<style scoped>
.productItems{
    padding: 10px;
    box-sizing: border-box;
}
.product_item{
    background: #fff;
    border-radius: 10px;
    font-size: 15px;
    padding: 10px 10px 0 10px;
    margin-bottom: 10px;
}
.product_type {
    display: flex;
    align-items: center;
}
.product_type .iconfont{
    font-size: 25px;
    color: aqua;
    padding-right: 5px;
}
.product_title{
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 540;
}
.info_container{
    font-weight: 600;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 5px;
}
.info_container span{
    display: block;
}
.info_time{
    font-size: 13px;
    color: #BCBCBC;
    margin-top: 5px;
}
.product_info{
    border-bottom: 1px solid #BCBCBC;
    padding-bottom: 15px;
}
.product_order{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.orderId{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: #BCBCBC;
}
.order_btn{
    border-radius: 15px;
    background: #fff;
    color: #BCBCBC;
    border: 1px solid #BCBCBC;
    font-size: 10px;
    padding: 3px 10px;
}
</style>
